class Vue {
    constructor (options){
        // 1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = Object.assign({}, options.data, options.methods)
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        // 2. 把data中的成员转换成getter 和 setter, 注入到Vue实例中
        this._proxyData(this.$data)
        // this._proxyData(this.methods)
        // this._setVueMethods(options.methods)
        // 3. 调用observer对象，监听数据的变化,将this.$data的属性也转换成getter和setter
        new Observer(this.$data)
        // 4. 调用compiler对象，解析指令和差值表达式
        new Compiler(this)
    }
    _proxyData (data) {
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
            Object.defineProperty(this, key, {
               enumerable: true,
               configurable: true,
               get(){
                   return data[key] // vue实例中vue[key]的值也是data[key]
               },
               set(newValue){ // 为什么newValue是对象，vue[key]的该对象的属性也定义getter和setter属性
                   if(newValue === data[key]){
                       return
                   }
                   data[key] = newValue // 更新this.$data中属性的值， 当前属性的值通过get()能够正确获取，待测试
               } 
            })
        })
    }
    _setVueMethods(methods){
        Object.keys(methods).forEach(funName => {
            this[funName] = methods[funName]
        })
    }
}